<template>
  <img class="logo" src="@renderer/assets/images/logo.png" />

  <Menu />

  <div class="drag"></div>

  <div class="tools">
    <i class="iconfont icon-zuixiaohua" @click="minimize"></i>
    <i class="iconfont icon-zuidahua" @click="maximize"></i>
    <i class="iconfont icon-guanbi" @click="close"></i>
  </div>
</template>
<script setup lang="ts">
import Menu from './menu/index.vue'

function minimize() {
  window.electron.ipcRenderer.send('minimize')
}

function maximize() {
  window.electron.ipcRenderer.send('maximize')
}

function close() {
  window.electron.ipcRenderer.send('close')
}
</script>
<style lang="scss" scoped>
.logo {
  margin-left: 5px;
  height: 40px;
}

.drag {
  flex: 1;
  height: 40px;
  -webkit-app-region: drag;
}
.tools {
  position: relative;
  height: 40px;
  display: flex;
  padding-left: 5px;
  &::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    height: 20px;
    width: 1px;
    background-color: var(--base-border);
    opacity: 0.6;
  }
  .iconfont {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 39px;
    width: 50px;
    background: transparent;
    font-size: 12px;
    &:hover {
      background-color: var(--input-background);
    }
  }
}
</style>
